<!DOCTYPE html>
<html>
  <head>
    <title>游戏入门</title>
    <script>
      var Timer = function (tick, handle) {
        this.timestamp = 0;
        this.tick = tick;
        this.handle = handle;
      };
      Timer.prototype.update = function (delta) {
        this.timestamp += delta;
        if (this.timestamp >= this.tick) {
          this.timestamp = 0;
          if (this.handle) {
            this.handle();
          }
        }
      };

      //动画类
      var Animation = function (sprite, images, canvas, tick) {
        this.sprite = sprite;
        this.index = 0;
        this.images = images;
        this.canvas = canvas;
        var self = this;
        this.timer = new Timer(tick, function () {
          if (self.index >= images.length - 1) {
            self.index = 0;
          }
          self.index++;
        });
      };
      Animation.prototype.update = function (delta) {
        this.timer.update(delta);
      };
      Animation.prototype.draw = function (delta) {
        var context = this.canvas.getContext("2d");
        context.drawImage(
          this.images[this.index],
          this.sprite.x,
          this.sprite.y
        );
      };

      Animation.prototype.play = function (auto) {};
      Animation.prototype.stop = function () {};
      Animation.prototype.pause = function () {};
      Animation.prototype.resume = function () {};

      var Magic = function (images, canvas) {
        this.type = "magic";
        this.color = "yellow";
        this.x = 0;
        this.y = 0;
        this.animation = new Animation(this, images, canvas, 60);
      };

      Magic.prototype.update = function (delta) {
        this.animation.update(delta);
      };

      Magic.prototype.draw = function (delta) {
        this.animation.draw(delta);
      };

      Magic.prototype.attack = function () {};
      Magic.prototype.die = function () {};
      Magic.prototype.run = function () {};

      var Rectangle = function (images, canvas) {
        this.type = "rect";
        this.xSpeed = 0.1;
        this.ySpeed = 0.1;
        this.xDirection = 1;
        this.yDirection = 1;
        this.x = 0;
        this.y = 0;
        this.width = 80;
        this.height = 80;
        this.color = "yellow";
        this.images = images;
        this.canvas = canvas;
      };

      Rectangle.prototype.update = function (delta) {
        if (this.x >= this.canvas.width - this.width) {
          this.xDirection = -1;
        }
        if (this.x <= 0) {
          this.xDirection = 1;
        }
        if (this.y >= canvas.height - this.height) {
          this.yDirection = -1;
        }
        if (this.y <= 0) {
          this.yDirection = 1;
        }
        var xS = this.xSpeed * delta;
        if (this.xDirection === 1) {
          this.x += xS;
        } else {
          this.x -= xS;
        }
        var yS = this.ySpeed * delta;
        if (this.yDirection === 1) {
          this.y += yS;
        } else {
          this.y -= yS;
        }
      };
      Rectangle.prototype.draw = function (delta) {
        var context = this.canvas.getContext("2d");
        //绘制图形
        context.fillRect(this.x, this.y, this.width, this.height);
        context.fillStyle = this.color;
      };

      window.onload = function () {
        //resource

        function loaderImages() {
          var images = [];

          for (let i = 1; i <= 10; i++) {
            var img = new Image();
            img.src = "src/assets/magic/" + [i] + ".png";
            images.push(img);
          }
          return images;
        }

        //加载的图片
        var images = loaderImages();

        //画布
        var canvas = window.document.getElementById("canvas");

        var sprites = [
          new Magic(images, canvas),
          new Rectangle(images, canvas),
        ];

        function clear() {
          var context = canvas.getContext("2d");
          context.clearRect(0, 0, canvas.width, canvas.height);
        }

        function update(delta) {
          for (var sprite of sprites) {
            sprite.update(delta);
          }
        }

        function draw(delta) {
          for (var sprite of sprites) {
            sprite.draw(delta);
          }
        }

        var pre = 0;

        function loop(timestamp) {
          let delta = timestamp - pre;
          pre = timestamp;

          //清空画布
          clear();
          update(delta);
          draw(delta);

          window.requestAnimationFrame(loop);
        }
        window.requestAnimationFrame(loop);
      };
    </script>
  </head>
  <body>
    <canvas
      id="canvas"
      width="800"
      height="600"
      style="width: 800px; height: 600px; border: solid 1px black"
    >
    </canvas>
  </body>
</html>
